<template>
  <div id="server-info">
    <ContentField>
      <template v-slot:content-field-card-name>个人信息</template>
      <template v-slot:content-field-card-button>
        <div></div>
      </template>
      <template v-slot:content-field-card-body>
        <div id="server-info-body">
          <el-form v-model="form" label-width="120px">
            <el-form-item label="服务员姓名：">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="性别：">
              <el-select
                v-model="form.sex"
                placeholder="please select your sex"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码：">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交修改</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { reactive } from "vue";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();
    let form = reactive({
      name: store.state.server.name,
      sex: store.state.server.sex,
      phone: store.state.server.phone,
    });
    let onSubmit = () => {
      let data = JSON.parse(JSON.stringify(form));
      data.token = store.state.user.jwt_token;
      data.id = store.state.server.id;
      store.dispatch("modify_server_info", {
        data,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "修改信息成功",
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "修改信息失败" + data.message,
            });
          }
        },
        error() {
          ElNotification.error({
            title: "Error",
            message: "修改信息失败",
          });
        },
      });
    };
    // console.log(form);
    return {
      form,
      store,
      onSubmit,
    };
  },
};
</script>

<style scoped></style>
